<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <slot>{{headingTitle}}</slot>
    </div>
    <ul class="list-group">
      <router-link tag="li" :to="{name: 'topic', params: {id: topic.id}}" class="list-group-item" v-for="(topic, index) in topics" :key="index">{{topic.title}}</router-link>
    </ul>

  </div>
</template>

<script>
export default {
  props: {
    headingTitle: String,
    topics: Array
  }
  
}
</script>

<style>

</style>
